<template>
  <div class="box">
    <header class="ordergoods-header">
      <router-link tag="span" :class="item.icon" :to="item.path" v-for="(item, index) of list" :key="index"></router-link>
      <span>待收货</span>
    </header>
    <div class="ordergoods-content">
      <div id="allmap" ref="allmap"></div>
      <div class="ordergoods-content-bottom">
        <div class="ordergoods-content-bottom-time">
          <div class="ordergoods-content-bottom-time-circle">
            <div class="con">
                <span id="h">00</span>:
                <span id="m">00</span>:
                <span id="s">00</span>
                <div class="anniu">
                <input type="button" id="start" value="开始"/>
                <input type="button" id="parse" value="暂停"/>
                <input type="button" id="end" value="结束"/>
                </div>
            </div>
          </div>
          <ul>
            <li>预计明日送达</li>
            <li><p>配送员<span>张师傅</span>正在配送</p></li>
            <li><span>取消订单</span><span>联系配送员</span><span>催单</span></li>
          </ul>
        </div>
        <div class="ordergoods-content-bottom-pro">
          <ol>
            <li>
              <p>商品信息</p>
              <p><span v-for="(pro, proindex) of prolist" :key="proindex"><img :src="pro.pimg"/></span></p>
              <p><span>商品总价</span><span>￥66</span></p>
              <p><span>配送费</span><span>免运费</span></p>
              <p><span>运费险</span><span>卖家赠送</span></p>
              <p><span>总计:</span><span>￥66666</span></p>
            </li>
          </ol>
          <div class="ordergoods-info">
            <p>订单信息</p>
            <p>订单号:<span>自动生成的需要数据支持</span></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Swipe, SwipeItem, Lazyload } from 'mint-ui'
Vue.use(Swipe, SwipeItem, Lazyload)
export default {
  data () {
    return {
      list: [
        {
          path: '/order',
          icon: 'iconfont icon-fanhui2'
        }
      ],
      setlist: [
        {
          path: '/set',
          pdesc: '待收货',
          icon: 'iconfont icon-trues'
        }
      ],
      prolist: [
        {
          pimg: 'https://img.alicdn.com/bao/uploaded/i3/1050808754/O1CN01dcPsmS2EXNduRZAtW_!!1050808754.jpg',
          pname: '益智不倒玩具',
          pdesc: '锻炼小手灵活度',
          pprice: '29.9'
        },
        {
          pimg: 'https://img.alicdn.com/bao/uploaded/i1/3043279553/O1CN01WmnyRR2KRK6HyxUIp_!!3043279553.jpg',
          pname: '益智不倒玩具',
          pdesc: '锻炼小手灵活度',
          pprice: '29.9'
        },
        {
          pimg: 'https://img.alicdn.com/bao/uploaded/i3/1663211965/TB2Z95irKySBuNjy1zdXXXPxFXa_!!1663211965.jpg',
          pname: '益智不倒玩具',
          pdesc: '锻炼小手灵活度',
          pprice: '29.9'
        }
      ]
    }
  },
  methods: {
    map () {
      // 创建Map实例
      let map = new window.BMap.Map(this.$refs.allmap)
      // 初始化地图,设置中心点坐标（经纬度/城市的名称）和地图级别
      map.centerAndZoom(new window.BMap.Point(113.65, 34.76), 11)
      // 添加地图类型控件
      map.addControl(new window.BMap.MapTypeControl({
        mapTypes: [
          window.BMAP_NORMAL_MAP,
          window.BMAP_HYBRID_MAP
        ]}))
      // 设置地图显示的城市此项是必须设置的
      map.setCurrentCity('郑州')
      map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
      // map.setMapStyle({style:'day'});// 地图风格
    }
  },
  mounted () {
    // 调用上面个的函数
    this.map()
    function $ (id) {
      return document.getElementById(id)
    }
    window.onload = function () {
      var count = 3000
      var timer = null
      $('start').onclick = function () {
        timer = setInterval(function () {
          count--
          $('h').innerHTML = showNum(parseInt(count / 3600))
          $('m').innerHTML = showNum(parseInt(count / 60) % 60)
          $('s').innerHTML = showNum(count % 60)
        }, 10)
      }
      $('parse').onclick = function () {
        clearInterval(timer)
      }
      $('end').onclick = function () {
        clearInterval(timer)
        count = 0
        $('h').innerHTML = '00'
        $('m').innerHTML = '00'
        $('s').innerHTML = '00'
      }
    }
    function showNum (num) {
      if (num < 10) {
        return '0' + num
      } else {
        return num
      }
    }
  },
  created () {
  }
}
</script>

<style lang="scss">
// 头部
.ordergoods-header{
  width:3.75rem;
  height:0.42rem;
  line-height:0.42rem;
  background:#F9F9F9;
  text-align: center;
  span{
    &:nth-child(1){
     font-size:0.16rem;
     float:left;
     font-weight: 700;
     margin-left:0.15rem;
    };
    &:nth-child(2){
      display:block;
      font-size:0.14rem;
      float:left;
       margin-left:1.3rem;
    }
  }
}
// 商品展示部分
.ordergoods-content{
  overflow-y:scroll;
  flex:1;
  #allmap{
      width:3.75rem;
      height: 2.3rem;
      overflow: hidden;
      .anchorBL{
        display:none
        }
  }
  .ordergoods-content-bottom{
    width:100%;
    flex:1;
    position:relative;
    background:red;
    .ordergoods-content-bottom-time{
      width:3.3rem;
      height:1.73rem;
      background:#FBFBFB;
      position: absolute;
      left:0.23rem;
      top:-0.8515rem;
      z-index:10;
      .ordergoods-content-bottom-time-circle{
        width:1rem;
        height:1rem;
        background:rgb(173, 202, 231);
        border-radius:0.5rem;
        position:absolute;
        left:1.15rem;
        top:-0.5rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
          .con{
            width:100%;
            height:100%;
            border-radius:50%;
            padding-top:0.2rem;
            flex-direction: column;
            justify-content: center;
            text-align: center;
            align-items: center;
            .anniu{
              margin-left:0.08rem;
              text-align: center;
              input{
              float:left;
              outline: none;
              font-size:0.12rem;
              }
            }
         }
      }
      ul{
        width:100%;
        height:1.23rem;
        margin-top:0.5rem;
        background:#FBFBFB;
        text-align: center;
        li:nth-of-type(1){
          font-size:0.12rem;
        }
        li:nth-child(2){
          margin-top:0.04rem;
          font-size:0.12rem;
          span{
            padding-left:0.1rem;
            padding-right:0.1rem;
          }
        }
        li:nth-child(3){
          margin-top:0.26rem;
          font-size:0.14rem;
          height:0.4rem;
          line-height:0.4rem;
          display:flex;
          justify-content: space-around;
          span{
            width:0.8rem;
            height:0.40rem;
            background: #ccc;
            border-radius:0.15rem;
            &:nth-child(1){
              opacity:0.5
            }
          }
        }
      }
    }
    .ordergoods-content-bottom-pro{
      overflow-y:scroll;
      width:3.3rem;
      min-height:4.04rem;
      position: absolute;
      margin-top:1rem;
      background:#FBFBFB;
      margin-left:0.23rem;
      ol{
        width:100%;
        height:3.16rem;
        li{
          width:2.83rem;
          height:3.16rem;
          background:#FBFBFB;
          margin:0 auto;
          p{
            display: flex;
            justify-content: space-between;
            span{
              display: block;
            }
            &:nth-child(1){
              width:100%;
              height:0.64rem;
              line-height:0.64rem;
              font-size:0.16rem
            }
            &:nth-child(2){
              width:100%;
              height:1.21rem;
              line-height:1.21rem;
              span{
                display: block;
                width:0.87rem;
                height:0.87rem;
                background:skyblue;
                img{
                  width:100%;
                  height:100%
                }
              }
            }
            &:nth-child(3){
              width:100%;
              height:0.2rem;
              line-height:0.2rem;
              span{
                font-size:0.14rem;
              }
            }
            &:nth-child(4),&:nth-child(5){
              height:0.3rem;
              line-height:0.3rem;
              span{
                font-size:0.14rem;
              }
            }
            &:nth-child(6){
              display: block;
              height:0.5rem;
              line-height:0.5rem;
              span{
                float:left;
                font-size:0.2rem;
                &:nth-child(1){
                  margin-left:1.6rem;
                }
              }
            }
          }
        }
      }
      .ordergoods-info{
        width:3.3rem;
        height:1rem;
        margin-left:0.23rem;
        margin-top:0.1rem;
        p{
          &:nth-child(1){
            font-size:0.16rem;
            height:0.5rem;
            line-height:0.5rem;
          }
         &:nth-child(2){
            font-size:0.14rem;
          }
        }
      }
    }
  }
}
.slide-enter, .slide-leave-to {
  transform: translateX(100%);
}
.slide-enter-active {
  transition: all 1s;
}
.slide-enter-to, .slide-leave {
  transform: translateX(0%);
}
.slide-leave-active {
  transition: all 0s;
}
</style>
